
<template>
  <div>
    <div class="panel panel-default panel-search">
      <el-form :inline="true">
        <el-form-item label="编码">
          <el-input v-model="page.query.param.code" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="page.query.param.name" clearable></el-input>
        </el-form-item>

        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="cancel">取消</el-button>
        <!--<el-button plain @click="exportRecords">导出 XLS</el-button>-->
          <el-button
        style="margin-top: 5px; margin-left: 20px"
        type="primary"
        plain
        @click="create"
        >新增</el-button
      >

      </el-form>
    </div>
    <!-- <v-toolbar title="基础配置 " style="color: rebeccapurple" type="alert">
      <el-button
        slot="tip"
        style="margin-top: 5px; margin-left: 20px"
        type="primary"
        plain
        @click="create"
        >新增</el-button
      >
    </v-toolbar> -->

    <v-table
      ref="table"
      :dblclick="edit"
      :page="page"
      :table-minheight="450"
      @dataloaded="onDataloaded"
    >
      <el-table-column prop="sortNo" :sortable="true" label="排序" width="80">
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.sortNo }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessType"
        :sortable="true"
        label="业务类型"
        width="111"
      >
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.businessType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="active"
        :sortable="true"
        label="激活"
        width="80"
      >
        <template slot-scope="{ row }">
          <span :style="row.active ? 'color:red' : 'color:black'">
            {{ row.active ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :sortable="true"
        label="配置名称"
        width="222"
      >
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="code" :sortable="true" label="编码" width="120">
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.code }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="value" :sortable="true" label="配置值" width="222">
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.value }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dataType"
        :sortable="true"
        label="数据类型"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ DICT.DATATYPE[row.dataType] }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" :sortable="true" label="备注" width="80">
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.remark }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="updatedBy"
        :sortable="true"
        label="最后操作人"
        width="122"
      >
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.userName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="操作" :fixed="'right'">
        <template slot-scope="scope">
          <el-button type="text" title="编辑" @click="edit(scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button
            type="text"
            @click="del(scope.row, scope.$index)"
            title="删除"
          >
            <span style="color: red"> <i class="el-icon-delete red"></i></span>
          </el-button>
        </template>
      </el-table-column>
    </v-table>
    <v-dialog ref="formDiag" :width="'45%'" title="信息编辑">
      <form-panel @saved="onFormSaved"></form-panel>
      <div slot="footer" style="margin-right: 40px">
        <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
          >保存</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formDiag.hide();
            }
          "
          >取消</el-button
        >
      </div>
    </v-dialog>
  </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.el-input {
  width: 160px;
}
.status_green {
  color: red;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>

<script>
//import CustomerSelect from '@/components/widgets/dongxw/CustomerSelect.vue';

import FormPanel from "./Form";

export default {
  components: { FormPanel },
  data() {
    return {
      dateRange: [],
      DICT: {
        DATATYPE: {
          700: "字符",
          701: "INT",
          702: "DECIMAL",
          703: "DATE",
          704: "DATETIME",
        },
      },
      summaryMap: {},
      pageNum: 1,
      page: {
        query: {
          orderBys: "sortNo|asc",
          param: {
            isDeleted: false,
          },
        },
        getData: this.$api.attend.attend.ConfigService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {},

  methods: {
    handleCommand(command) {
      this.page.query.orderBys = command;
      this.search();
    },
    calCbm(val) {
      return 0;
    },
    onDataloaded(rsp) {},
    /*
            导出
             */
    exportRecords() {
      let params = this.getSearchParams();
      this.$api.attend.attend.DayService.export(params);
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (this.dateRange && this.dateRange.length > 0) {
        this.page.query.dateRanges["holiday"] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },
    create() {
      this.$refs.formDiag.show();
    },
    edit(row) {
      this.$refs.formDiag.show({ configId: row.configId });
    },
    toggleStatus(row) {},
    del(row) {
      this.$confirm("确定删除此条记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.attend.attend.ConfigService.deleteById(row.configId).then((rsp) => {
          this.$msgJsonResult(rsp);
          this.search();
        });
      });
    },
    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      this.search();
    },
    search() {
      this.$refs.table.pageNum = 1;
      this.getSearchParams();
      this.$refs.table.load();
    },
    cancel() {
      this.dateRange = [];
      this.page.query.param = { prdFlag: 0 };
      this.search();
    },
  },
  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
